<!DOCTYPE html>
<html>
	<head>
<!-- maven打包没有打包进去。。。。。 -->
		<meta charset="utf-8">
		<title>计算机与通信工程学院生活部资产管理后台</title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="js/router.js"></script>
		<script src="js/security.js"></script>
		<script src="js/util.js"></script>
		<link rel="stylesheet" type="text/css" href="css/manage.css"/>
	</head>
	
	<body>
		<div id="app">
			<!-- 最后一项工作，增加一个登出，做成页面头的模式, 就直接拿首页的头过来用了 -->
			<div class="header">
				<img id="headerImg" :src="header" />
				<div class="header_text_container">
					<h1>计算机与通信工程学院-生活部</h1>
				</div>
				<!-- 登出按钮 -->
				<div class="buttonArea">
					<!-- 加个图标 -->
					<el-button type="primary" round @click="handleLogout" icon="el-icon-top">退出登录</el-button>
				</div>
			</div>
			
			<el-row class="tac">
				<el-col :span="4">
					<el-menu default-active="0" class="el-menu-vertical-demo" @select="handleSelect">
						<el-menu-item v-for="(item,index) in menuItem" :index="index.toString()" :key="item.id">
							<i :class="item.class"></i>
							<span slot='title'>{{item.name}}</span>
						</el-menu-item>
					</el-menu>
				</el-col>
				<el-col :span="20">
					<!-- 这里本来想用列表渲染，但是每一项的显示内容都不一样。。。。 行数太多，这软件已经卡起来了 -->
					<div v-if="menuItem[0].visiable">
						<div class="leftmov bottom-line left-line">
							<el-descriptions title='系统信息'>
								<el-descriptions-item v-for="(data,index) in datas" :label="data.name" :key="data.id">{{data.content}}</el-descriptions-item>
							</el-descriptions>
						</div>
						<div class="leftmov bottom-line left-line">
							<el-descriptions title='固件信息'>
								<el-descriptions-item label="整体状态">
									<el-tag :type="hardInfo.status === 'DOWN' ? 'warning' : ''">{{hardInfo.status}}</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="数据库状态">
									<el-tag :type="hardInfo.components.db.status === 'DOWN' ? 'warning' : ''">{{hardInfo.components.db.status}}</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="邮件服务器状态">
									<el-tag :type="hardInfo.components.mail.status === 'DOWN' ? 'warning' : ''">{{hardInfo.components.mail.status}}</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="ping">
									<el-tag :type="hardInfo.components.ping.status === 'DOWN' ? 'warning' : ''">{{hardInfo.components.ping.status}}</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="redis状态">
									<el-tag :type="hardInfo.components.redis.status === 'DOWN' ? 'danger' : ''">{{hardInfo.components.redis.status}}</el-tag>
								</el-descriptions-item>
								<!-- 这里有个小问题，本来想写内存占用实时分析，考虑到短时间进行大量请求，我的服务器带不动，就每十分钟请求一次
								可以考虑使用WebSocket服务器推送，不用心跳检测，但是这样还是会占用大量网络资源。。。
								后来发现请求的接口发送的是磁盘占用，而不是实时内存占用，所以就改成磁盘占用情况
								这里也考虑到实际业务，对内存的要求不高，但随着业务量增长，磁盘占用会越来越高。 -->
								<el-descriptions-item label='磁盘占用情况'>
									<el-progress type="dashboard" :percentage="memStatus" :color="colors"></el-progress>
								</el-descriptions-item>
							</el-descriptions>
						</div>
					</div>
					<div v-if="menuItem[1].visiable">
						<div class="leftmov bottom-line left-line">
							<el-descriptions title='个人信息'>
								<template slot="extra">
									 <el-button type="primary" size="small" @click="updateDrawerVisible = true">修改密码</el-button>
								</template>
								<el-descriptions-item label='账号信息'>{{user.account}}</el-descriptions-item>
								<el-descriptions-item label='描述'>{{user.description}}</el-descriptions-item>
								<el-descriptions-item label='权限信息'>{{user.auth === 0 ? 'root' : 'common'}}</el-descriptions-item>
							</el-descriptions>
						</div>
						
						<el-drawer title="修改密码" :before-close="updatePasswordClose" :visible="updateDrawerVisible"  direction="rtl" size="30%">
							<el-form :model='updatePasswordForm' :rules='updatePasswordRules' ref="updatePasswordForm" label-width="100px" class="demo-ruleForm">
								<el-form-item label="旧密码" prop="oldPass">
									<el-input type="password" v-model="updatePasswordForm.oldPass"></el-input>
								</el-form-item>
								<el-form-item label="新密码" prop="newPass">
									<el-input type="password" v-model="updatePasswordForm.newPass"></el-input>
								</el-form-item>
								<el-form-item label="再次输入" prop="againPass">
									<el-input type="password" v-model="updatePasswordForm.againPass"></el-input>
								</el-form-item>
								<el-button type="primary" @click="submitUpdatePasswordForm('updatePasswordForm')">提交</el-button>
								<el-button @click="resetUpdatePasswordForm('updatePasswordForm')">重置</el-button>
							</el-form>
						</el-drawer>

						<!-- ------------------------操作按钮----------------------------- -->
						<div class="leftmov bottom-line left-line margin-top-bottom">
							<el-button type="primary" @click="addDeptDialogShow = true" icon="el-icon-circle-plus-outline">添加部门</el-button>
							<el-button type="success" @click="addUserDialogShow = true" icon="el-icon-circle-plus-outline">添加用户</el-button>
						</div>
						<!-- ------------------------操作按钮----------------------------- -->
						
						<el-dialog title="添加部门信息" :visible="addDeptDialogShow" :before-close='addDeptDialogClose'>
							<el-form :model="addingDept" label-width='100px'>
								<el-form-item label="部门名称">
									<el-input v-model="addingDept.name" placeholder="请输入部门名称"></el-input>
								</el-form-item>
							</el-form>
							<div slot="footer" class="dialog-footer">
							    <el-button @click="addDeptDialogShow = false">取 消</el-button>
							    <el-button type="primary" @click="addDept">确 定</el-button>
							</div>
						</el-dialog>
						
						<!-- ------------------------添加用户对话框----------------------------- -->
						<el-dialog title="添加用户" :visible="addUserDialogShow" :before-close='addUserDialogClose'>
							<el-form :model="addingUser" label-width='100px'>
								<el-form-item label="账号">
									<el-input type='number' v-model='addingUser.account' placeholder='请输入添加用户账号'></el-input>
								</el-form-item>
								<el-form-item label="描述信息">
									<el-input type='textarea' v-model='addingUser.desc' placeholder="请输入描述信息"></el-input>
								</el-form-item>
								<el-form-item label="权限">
									<el-select v-model="addingUser.auth" placeholder="请选择">
										<el-option v-for="value, key in auths" :key="key" :label="key" :value="value"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="所属部门">
									<el-select v-model="addingUser.deptId" placeholder="请选择">
										<el-option v-for="dept in depts" :key="dept.id" :label="dept.name" :value="dept.id"></el-option>
									</el-select>
								</el-form-item>
							</el-form>
							<div slot="footer" class="dialog-footer">
							    <el-button @click="addUserDialogShow = false">取 消</el-button>
							    <el-button type="primary" @click="addUser">确 定</el-button>
							</div>
						</el-dialog>
						<!-- ------------------------添加用户对话框----------------------------- -->
						
						<div class="leftmov left-line">
							<template>
								<el-table :data="users" border stripe>
									<el-table-column type="index" :index="columnBeginIndex" label="ID"></el-table-column>
									<el-table-column label="账号信息" prop="account" sortable></el-table-column>
									<el-table-column label="描述信息" prop="description"></el-table-column>
									<el-table-column label="权限信息" prop="auth" sortable></el-table-column>
									<el-table-column label="所属部门" prop="dept.name"></el-table-column>
									<el-table-column label="操作" fixed="right">
										<template slot-scope="scope">
											<el-button @click="handleEdit(scope.row, $event)" type="primary" icon="el-icon-edit">编辑</el-button>
										</template>
									</el-table-column>
								</el-table>
							</template>
						</div>
						<el-drawer title="编辑信息" :visible="updateInfoVisible" direction="rtl" @close="updateInfoVisible = false" size="30%">
							<el-form :model="cachedUserInfo" :rules="editUserRules" ref="cachedUserInfo" label-width="100px" class="demo-ruleForm">
								<el-form-item label="ID" prop="id">
									<el-input type="number" :value="cachedUserInfo.id" disabled></el-input>
								</el-form-item>
								<el-form-item label="账号" prop="account">
									<el-input type="text" :value="cachedUserInfo.account" disabled></el-input>
								</el-form-item>
								<el-form-item label="描述" prop="description">
									<el-input type="textarea" rows="2" placeholder="请输入内容" v-model="cachedUserInfo.description"></el-input>
								</el-form-item>
								<el-form-item label="权限" prop="auth">
									<el-select v-model="cachedUserInfo.auth" placeholder="请选择">
										<el-option v-for="value, key in auths" :key="key" :label="key" :value="value"></el-option>
									</el-select>
								</el-form-item>
								<el-form-item label="所属部门" prop="dept">
									<el-select v-model="cachedUserInfo.dept.id" placeholder="请选择">
										<el-option v-for="dept of depts" :key="dept.id" :label="dept.name" :value="dept.id"></el-option>
									</el-select>
								</el-form-item>
								<div class="leftmov">
									<el-button type="primary" @click="submitUndateInfo">提交</el-button>
									<el-button @click="resetUpdateInfo">重置</el-button>
								</div>
							</el-form>
						</el-drawer>
					</div>
					<div v-if="menuItem[2].visiable">
						<div class="leftmov left-line bottom-line">
							<el-descriptions title="仓储信息">
								<el-descriptions-item label="仓储地点">
									<el-tag size="small">基础楼104</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="仓储所属">
									<el-tag> 计算机与通信工程学院</el-tag>
								</el-descriptions-item>
							</el-descriptions>
						</div>
						<div class="leftmov left-line">
							<el-table :data="items">
								<el-table-column type="index" :index="1" label="ID"></el-table-column>
								<el-table-column prop="itemPic" label="物品图片">
									<template slot-scope="scope">
										<a :href="scope.row.itemPic" target="_blank">
											<img :src="scope.row.itemPic" style="height: 50px; widht: 50px"/>
										</a>
									</template>
								</el-table-column>
								<el-table-column prop="name" label="物品名"></el-table-column>
								<el-table-column prop="number" label='物品数量'></el-table-column>
								<el-table-column label="操作" fixed="right">
									<template slot-scope="scope">
										<el-button @click="handleEditItem(scope.row, $event)" type="primary" icon="el-icon-edit">编辑</el-button>
									</template>
								</el-table-column>
							</el-table>
							<div class="navigation">
								<el-pagination
								background 
								:pager-count="5" 
								layout="prev, pager, next" 
								:total="totalItemNumber" 
								:size="pageSize" 
								@current-change="currentPageChange"></el-pagination>
							</div>
						</div>
						
						<!-- 编辑物品信息drawer -->
						<el-drawer title="编辑物品信息" :before-close='editItemDrawerClose' direction='rtl' size="30%" :visible='editItemDrawerShow'>
							<el-form :model="cachedItem" ref="cachedItem" label-width="100px">
								<el-form-item label="物品ID">
									<el-input v-model="cachedItem.id" disabled></el-input>
								</el-form-item>
								<el-form-item label="物品图片">
									<a :href="cachedItem.itemPic" target="_blank">
										<img :src="cachedItem.itemPic" style="width: 50px; height: 50px;"/>
									</a>
								</el-form-item>
								<el-form-item label='物品名'>
									<el-input type="text" v-model="cachedItem.name"></el-input>
								</el-form-item>
								<el-form-item label='物品数量'>
									<el-input-number v-model='cachedItem.number' :min='0'></el-input-number>
								</el-form-item>
								<el-form-item>
								    <el-button type="primary" @click="submitEditItem">上传</el-button>
								    <el-button @click="editItemDrawerShow = false">取消</el-button>
								  </el-form-item>
							</el-form>
						</el-drawer>
						
					</div>
					<div v-if="menuItem[3].visiable">
						<div class="leftmov bottom-line left-line">
							<el-descriptions title="发票信息">
								<el-descriptions-item label="发票来源">
									<el-tag size="small">微信小程序</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="记录周期">
									<el-tag size="small">最近两个月</el-tag>
								</el-descriptions-item>
							</el-descriptions>
						</div>
						<div class="margin-top-bottom">
							<!-- 发票渲染 el-timeline 是时间轴组件-->
							<el-timeline>
								<!-- 循环渲染每一个发票, 文件太大导致软件有点卡 -->
								<el-timeline-item v-for="(invoice,index) in invoices" :key='invoice.id' :timestamp="formattedDate(invoice.applyDate)" placement="top">
									<el-card>
										<!-- 发票描述信息 -->
										<el-descriptions title='发票描述'>
											<el-descriptions-item label="发票代码">{{invoice.invoiceId}}</el-descriptions-item>
											<el-descriptions-item label="开户行">{{invoice.accountBank}}</el-descriptions-item>
											<el-descriptions-item label="发票总额">{{invoice.amount}}</el-descriptions-item>
											<el-descriptions-item label="申请时间">{{formattedDate(invoice.applyDate)}}</el-descriptions-item>
											<el-descriptions-item label="开票时间">{{formattedDate(invoice.date)}}</el-descriptions-item>
											<el-descriptions-item label="申请账号">{{invoice.applyUser.account}}</el-descriptions-item>
											<el-descriptions-item label="描述">{{invoice.applyUser.description}} 提交于 {{formattedDate(invoice.applyDate)}}</el-descriptions-item>
											<el-descriptions-item label="发票预览">
												<el-tag size="mini">
													<a :href="invoice.filePathArr[0]" style="outline: none; color: rgb(64,158,255);" target="_blank">点我查看</a>
												</el-tag>
											</el-descriptions-item>
										</el-descriptions>
										<!-- 报销物品列表 stripe属性指定表格显示为斑马纹 -->
										<el-table :data="invoice.items" stripe>
											<el-table-column type="index" :index="1" label="ID"></el-table-column>
											<el-table-column prop='name' label='物品名'></el-table-column>
											<el-table-column prop='amount' label='物品金额'></el-table-column>
										</el-table>
									</el-card>
								</el-timeline-item>
							</el-timeline>
						</div>
					</div>
					<div v-if="menuItem[4].visiable">
						<div class="leftmov bottom-line left-line">
							<el-descriptions title="组织信息">
								<el-descriptions-item label="组织所属">
									<el-tag size="small">计算机与通信工程学院团委学生会</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="注意">
									<el-tag size='small' type='warning'>
										组织转接后当前账号将下放为部门管理员，请谨慎处理
									</el-tag>
								</el-descriptions-item>
							</el-descriptions>
						</div>
						<div class="leftmov">
							<!-- 可转接列表 -->
							<el-table :data="canTransUsers" stripe>
								<el-table-column type="index" :index="1"></el-table-column>
								<el-table-column label="账号信息" prop="account"></el-table-column>
								<el-table-column label="描述信息" prop="description"></el-table-column>
								<el-table-column label="操作">
									<template slot-scope="scope">
										<el-button @click="handleTrans(scope.row, $event)" type="primary" icon="el-icon-edit">转接</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</body>
	
	<script>
		const userModal = localStorage.getItem("user");
		
		if (userModal === undefined || userModal === null || userModal.trim() === '') {
			window.location.href = "index.html";
		}
		
		var notBlankValidator = function(rule, value, callback) {
			if (value === null || value === undefined || value.trim() === '') {
				callback(new Error("不能为空！"));
			}
			callback();
		}
		
		const vm = new Vue({
			el:"#app",
			data: {
				header: router.host + '/static/jsjytxgcxy.jpg',
				menuItem: [
					{id: 1, name: '系统数据', visiable: true, class: 'el-icon-s-data'},
					{id: 2, name: '用户管理', visiable: false, class: 'el-icon-user-solid'},
					{id: 3, name: '仓储管理', visiable: false, class: 'el-icon-box'},
					{id: 4, name: '发票统计', visiable: false, class: 'el-icon-tickets'},
					{id: 5, name: '组织转接', visiable: false, class: 'el-icon-s-custom'}
				],
				hardInfo: {
					status: '计算中',
					components: {
						db: {status: '计算中'},
						mail: {status: '计算中'},
						ping: {status: '计算中'},
						redis: {status: '计算中'}
					}
				},
				colors: [
					{persentage: 40, color: '#5cb87a'},
					{persentage: 70, color: '#e6a23c'},
					{persentage: 100, color: '#f56c6c'}
				],
				user: {
					account: '获取中...',
					auth: '获取中...',
					description: '获取中...',
				},
				
				updateDrawerVisible: false,
				updatePasswordForm: {
					oldPass: '',
					newPass: '',
					againPass: '',
				},
				
				updatePasswordRules: {
					oldPass: [
						{validator: function(rule, value, callback) {
							if (value === null || value === undefined || value.trim() === '') {
								callback(new Error("请输入旧密码！"));
							}
							callback();
						}, trigger: 'blur'},
					],
					newPass: [
						{validator: function(rule, value, callback) {
							if (value === null || value === undefined || value.trim() === '') {
								callback(new Error("请输入新密码！"));
							} else{
								callback();
							}
						}, trigger: 'blur'},
					],
					againPass: [
						{validator: function(rule, value, callback) {
							if (value === null || value === undefined || value.trim() === '') {
								callback(new Error("请再次输入密码！"));
							} else {
								callback();
							}
						}, trigger: 'blur'},
					],
				},
				
				addDeptDialogShow: false,
				addUserDialogShow: false,
				addingDept: {name: ''},
				addingUser: {
					account: '',
					auth: '',
					desc: '',
					deptId: '',
				},
				userSearchCondition: '',
				
				columnBeginIndex: 1,
				users: [
					{id: 0, account: '获取中...', description: '获取中...', auth: '获取中...', dept:{id: '获取中', name: "获取中"}},
				],
				
				editUserRules: {
					description: [
						{validator: notBlankValidator, trigger: 'blur'},
					]
				},
				
				updateInfoVisible: false,
				auths: {root: 0, manager: 1},
				depts: [{id:0, name: ''}],
				
				cachedUserInfo: {id:0, account: '', description: '', auth: '', dept:{id:"", name: ""}},
				
				pageNum: 0,
				items:[
					{id: 0, name: '', number: 0, itemPic: ''},
				],
				totalItemNumber: 0,
				
				editItemDrawerShow: false,
				cachedItem: {id: 0, name: '', number: 0, itemPic:''},
				
				invoices: [
					{
						id: 0, 
						accountBank: '', 
						invoiceId: '', 
						amount: '',
						date: new Date(),
						applyDate: new Date(),
						items: [
							{
								id: 0,
								name: '',
								amount: '',
							},
						],
						filePathArr: [
							"",
						],
						dept: {
							id: 0,
							name: '',
						},
						applyUser: {
							id: '',
							account: '',
							auth: '',
							description: '',
						}
					},
				],
				canTransUsers: [
					{id: '', account: '', auth: '', description: ''},
				],
			},
			computed: {
				datas() {
					const host = window.location.host;
					var datas = [
						{name: '系统所属', content: '东北大学秦皇岛分校 计算机与通信工程学院 生活部'},
						{name: '开发人员', content: '2019级裴留阳'},
						{name: '地址', content: '河北省秦皇岛市海港区泰山路143号'},
						{name: '系统地址', content: host},
						{name: '提示', content: '内部人员使用，切勿暴露信息'}
					];
					return datas;
				},
				memStatus() {
					if (this.hardInfo.components.diskSpace === undefined) {
						return 0;
					} else {
						diskSpace = this.hardInfo.components.diskSpace.details;
						var persentage = (diskSpace.total - diskSpace.free) / diskSpace.total;
						return Math.ceil(persentage * 100);
					}
				},
			
				pageSize() {
					return 10;
				},
				formattedDate() {
					// 闭包实现日期格式化
					return function(value = "") { 
						// 正则表达式匹配yyyy-MM-dd
						const pattern = /[\d]{4}-[\d]{2}-[\d]{2}/;
						if (value == null || value == undefined || value.trim() == '') {
							return '';
						}
						var dateStr = value.match(pattern)[0];
						// 好像多余了。。。
						// if (dateStr !== undefined && dateStr !== null) {
						// 	var arr = dateStr.split("-");
						// 	var yearStr = arr[0];
						// 	var monthStr = arr[1];
						// 	var dateStr = arr[2];
						// 	return yearStr + ""
						// }
						return dateStr;
					}
				},
			},
			methods: {
				handleLogout() {
					// 直接发起请求即可
					axios.post(router.host + router.logout, {
						userModal: userModal,
					})
					// 利用底层的多线程特性，直接重定向即可，不处理结果
					window.location.href = 'index.html';
				},
				handleSelect(index, indexPath) {
					this.refreshVisiable();
					this.menuItem[index].visiable = true;
				},
				refreshVisiable() {
					for (var i = 0; i < this.menuItem.length; i++) {
						this.menuItem[i].visiable = false;
					}
				},
				updatePasswordClose(done) {
					this.updateDrawerVisible = false;
					if (this.loading) {
						return;
					}
					this.loading = true;
					this.timer = setTimeout(() => {
						done();
						setTimeout(() => {
							this.loading = false;
						}, 400)
					}, 2000);
				},
				
				
				
				submitUpdatePasswordForm(name) {
					var that = this;
					this.$refs[name].validate((valid) => {
						if (valid) {
							const oldPass = that.updatePasswordForm.oldPass;
							const encryOldPass = security.md5(oldPass);
							const newPass = that.updatePasswordForm.newPass;
							const againPass = that.updatePasswordForm.againPass;
							if (newPass !== againPass) {
								that.$message({
									message: "两次输入的密码不一致！",
									iconClass: 'el-icon-close',
									center: true,
								})
							} else {
								const encryPass = security.md5(newPass);
								axios.post(router.host + router.updatePass, {
									userModal: userModal,
									newPass: encryPass,
									oldPass: encryOldPass,
								}).then(function(res) {
									const resData = res.data;
									
									if (resData.code == 200) {
										var message = that.$message({
											message: "修改成功!",
											iconClass: "el-icon-check",
											center: true,
										});
										setTimeout(function() {
											message.close();
											window.location.href = 'index.html';
										}, 1000);
									} else {
										that.$message({
											message: "修改失败!",
											iconClass: "el-icon-close",
											center: true,
										})
									}
									
								}).catch(function(errMsg) {
									that.$message({
										message: "修改失败： " + errMsg,
										iconClass: "el-icon-close",
										center: true,
									})
								})
							}
						}
					})
				},
				resetUpdatePasswordForm(name) {
					this.updatePasswordForm.oldPass = '';
					this.updatePasswordForm.newPass = '';
					this.updatePasswordForm.againPass = '';
				},
				
				handleEdit(row, e) {
					const userID = row.id;
					this.cachedUserInfo = JSON.parse(JSON.stringify(row));
					this.updateInfoVisible = true;
				},
				submitUndateInfo() {
					var message = this.$message({
						message: '修改中',
						iconClass: 'el-icon-loading',
						center: true,
					})
					var that = this;
					var cachedUserInfo = this.cachedUserInfo;
					for (var i = 0; i < this.users.length; i++) {
						if (this.users[i].id === cachedUserInfo.id) {
							this.users[i] = cachedUserInfo;
							axios.post(router.host + router.updateUser, {
								userModal: userModal,
								user: JSON.stringify(cachedUserInfo),
							}).then(function(res) {
								if (res.data.code == 200) {
									message.close();
									that.$message({
										message: "修改成功",
										iconClass: 'el-icon-check',
										center: true,
									})
									getAllUser();
								} else {
									message.close();
									that.$message({
										message: "修改失败",
										iconClass: 'el-icon-close',
										center: true,
									})
								}
							}).catch(function(errMsg) {
								message.close();
								that.$message({
									message: '错误：' +errMsg,
									iconClass: 'el-icon-close',
								})
							})
							return;
						}
					}
				},
				resetUpdateInfo: function() {
					var that = this;
					var cachedUserInfo = this.cachedUserInfo;
					for (var user of this.users) {
						if (user.id === cachedUserInfo.id) {
							cachedUserInfo = JSON.parse(JSON.stringify(user));
						}
					}	
				},
				
				addUserDialogClose: function() {
					this.addUserDialogShow = false;
				},
				addDeptDialogClose: function() {
					this.addDeptDialogShow = false;
				},
				addDept: function() {
					var that = this;
					var name = this.addingDept.name;
					if (name === undefined || name === null || name.trim() === '') {
						this.addDeptDialogShow = false;
						return;
					}
					var message = that.$message({
						message: "添加中",
						iconClass: "el-icon-loading",
						center: true,
					})
					axios.get(router.host + router.addDept, {
						params: {
							userModal: userModal,
							name: name,
						}
					}).then(function(res) {
						message.close();
						if (res.data.code == 200) {
							that.$message({
								message: '添加成功',
								iconClass: 'el-icon-check',
								center: true,
							})
							getDepts();
						} else {
							that.$message({
								message: '添加失败',
								iconClass: 'el-icon-close',
								center: true,
							})
						}
					}).catch(function(errMsg) {
						that.$message({
							message: '错误： ' + errMsg,
							iconClass: 'el-icon-close',
							center: true,
						})
					})
					this.addingDept = {name: ""};
					this.addDeptDialogShow = false;
				},
				addUser: function() {
					const pattern = /^[\d]{1,20}$/
					var that = this;
					var addingUser = that.addingUser;
					if (addingUser.account === null || addingUser.account === undefined || addingUser.account.trim() === '') {
						this.$message({
							message: "账号信息不能为空！",
							iconClass: 'el-icon-close',
							center: true,
						})
						return;
					}
					if (!pattern.test(addingUser.account)) {
						this.$message({
							message: "账号不合法！！",
							iconClass: 'el-icon-close',
							center: true,
						})
						return;
					}
					if (addingUser.desc === null || addingUser.desc === undefined || addingUser.desc.trim() === '') {
						this.$message({
							message: "描述信息不能为空！",
							iconClass: 'el-icon-close',
							center: true,
						})
						return;
					}
					if (addingUser.auth === null || addingUser.auth === undefined) {
						this.$message({
							message: "权限信息不能为空！",
							iconClass: 'el-icon-close',
							center: true,
						})
						return;
					}
					if (addingUser.deptId === null || addingUser.deptId === undefined) {
						this.$message({
							message: "部门信息不能为空！",
							iconClass: 'el-icon-close',
							center: true,
						})
						return;
					}
					var message = this.$message({
						message: "上传中...",
						iconClass: 'el-icon-loading',
						center: true,
					})
					axios.get(router.host + router.addUser, {
						params: {
							userModal: userModal,
							account: addingUser.account,
							auth: addingUser.auth,
							desc: addingUser.desc,
							deptId: addingUser.deptId,
						}
					}).then(function(res) {
						message.close();
						if (res.data.code == 200) {
							that.$message({
								message: "添加成功！",
								iconClass: 'el-icon-check',
								center: true,
							})
							this.addUserDialogShow = false;
							getAllUser();
						} else if (res.data.code == 505) {
							that.$message({
								message: '账号已存在！',
								iconClass: 'el-icon-close',
								center: true,
							})
						} else {
							that.$message({
								message: '添加失败！',
								iconClass: 'el-icon-close',
								center: true,
							})
						}
					}).catch(function(errMsg) {
						message.close();
						that.$message({
							message: '错误： ' + errMsg,
							iconClass: 'el-icon-close',
							center: true,
						})
					})
				},
			
				getItems: function() {
					var pageNum = this.pageNum;
					var pageSize = this.pageSize;
					var that = this;
					axios.get(router.host + router.getItems, {
						params: {
							pageNum: pageNum,
							pageSize: pageSize,
						}
					}).then(function(res) {
						if (res.data.code == 200) {
							that.items = res.data.data.items;
						} else {
							that.$message({
								message: "信息获取失败！",
								iconClass: 'el-icon-close',
								center: true,
							})
						}
					}).catch(function(errMsg) {
						that.$message({
							message: "错误：" + errMsg,
							iconClass: 'el-icon-close',
							center: true,
						})
					})
				},
			
				handleEditItem: function(row, e){
					this.cachedItem = JSON.parse(JSON.stringify(row));
					this.editItemDrawerShow = true;
				},
				
				editItemDrawerClose: function() {
					this.editItemDrawerShow = false;
				},
				
				submitEditItem: function() {
					var message = this.$message({
						message: "上传修改中",
						iconClass: "el-icon-loading",
						center: true,
					})
					var that = this;
					const cachedItem = this.cachedItem;
					axios.post(router.host + router.updateItem, {
						userModal: userModal,
						item: JSON.stringify(cachedItem),
					}).then(res => {
						if (res.data.code == 200) {
							message.close();
							that.$message({
								message: "修改成功！",
								iconClass: 'el-icon-check',
								center: true,
							})
							that.getItems();
						} else {
							message.close();
							that.$message({
								message: "修改失败！",
								iconClass: 'el-icon-close',
								center: true,
							})
						}
					}).catch(errMsg => {
						that.$message({
							message: '错误：' + errMsg,
							iconClass: 'el-icon-close',
							center: true,
						})
					})
					this.editItemDrawerShow = false;
				},
			
				getTotalIteNum: function() {
					var that = this;
					axios.get(router.host + router.countItem)
					.then(res => {
						that.totalItemNumber = res.data.data.count;
					}).catch(ignore => {})
				},
				currentPageChange: function(currentPage) {
					this.pageNum = currentPage - 1;
					this.getItems();
				},
			
				getInvoices() {
					// 保持指针引用
					var that = this;
					
					const endDate = new Date().getTime();
					// 偏移两个月
					const offset = 1000 * 60 * 60 * 24 * 30 * 2
					const beginDate = endDate - offset;
					// 发起请求获取发票数据
					axios.post(router.host + router.getInvoices, {
						userModal: userModal,
						beginDate: beginDate,
						endDate: endDate,
					}).then(res => {
						// 网络请求成功
						if (res.data.code == 200) {
							// 后端响应成功
							that.invoices = res.data.data.invoices;
						} else {
							// 数据获取失败，Ignore
						}
					}).catch(errMsg => {
						// 网络请求失败 Ignore
					});
				},
				
				// 前端获取可转接列表
				getCanTrans() {
					// 保留指针引用
					var that = this;
					axios.get(router.host + router.getCanTrans, {
						params: {
							userModal: userModal,
						}
					}).then(res => {
						// 网络请求成功
						if (res.data.code == 200) {
							// 后端响应成功
							that.canTransUsers = res.data.data.users;
						}  else {
							//ignore
						}
					}).catch(errMsg => {
						// ignore
					})
				},
				handleTrans(row, e) {
					// 弹窗提示
					var that = this;
					var message = that.$message({
						message: "请求提交中",
						iconClass: 'el-icon-loading',
						center: true,
					})
					// 发起请求进行转接
					axios.post(router.host + router.doTrans, {
						userModal: userModal,
						user: row,
					}).then(res => {
						// 网络请求成功
						if (res.data.code == 200) {
							// 后端响应成功
							message.close();
							that.$message({
								message: "请求成功！",
								iconClass: 'el-icon-check',
								center: true,
							})
							// 定向页面到登录页
							window.location.href = 'index.html';
						} else {
							// 后端响应失败
							message.close();
							that.$message({
								message: "请求失败",
								iconClass: 'el-icon-close',
								center: true,
							})
						}
					}).catch(errMsg => {
						// 网络请求失败
						that.$message({
							message: '错误： ' + errMsg,
							iconClass: 'el-icon-close',
							center: true,
						})
					})
				}
			},
			mounted() {
				this.refreshVisiable();
				this.menuItem[0].visiable = true;	
			}
		});
		
		var getSystemInfo = function() {
			axios.get(router.host + router.systemInfo, {
				headers: {
					'accept': 'application/json',
				},
				transformResponse: function(data) {
					var hardInfo = JSON.parse(data);
					vm.hardInfo = hardInfo;
				}
			})
			.then(function(ignore) {
			}).catch(function(ignore) {
			})
		};
		
		var getUserInfo = function() {
			axios.post(router.host + router.getUserInfo, {
				userModal: userModal
			}).then(function(res) {
				const resData = res.data;
				if (resData.code === 504) {
					window.location.href = "index.html";
					vm.user = {
						account: '计算中...',
						description: "计算中...",
						auth: "计算中...",
					};
				} else if (resData.code === 200) {
					vm.user = resData.data.user;
				}
			})
		};
		
		var getAllUser = function() {
			axios.post(router.host + router.getAllUser, {
				userModal: userModal,
			}).then(function(res) {
				const resData = res.data;
				if (res.data.code = 200) {
					const localUsers = vm.users;
					vm.users = resData.data.users;
				} else {
					vm.users = [
						{id: 0, account: '获取失败！', description: '获取失败！', auth: '获取失败！'}
					];
				}
			})
		}
		
		var getAuthDetails = function() {
			axios.get(router.host + router.authDetail)
			.then(function(res) {
				const resData = res.data;
				vm.auths = resData.data;
			}).catch(function(ignore){});
		}
		
		var getDepts = function() {
			axios.get(router.host + router.depts, {
				params: {
					all: true,
				}
			})
			.then(function(res) {
				const resData = res.data;
				vm.depts = resData.data.depts;
			})
			.catch(function(ignore){});
		}
		
		
		// 调用获取初始数据
		getUserInfo();
		
		getAllUser();
		
		getAuthDetails();
		
		getDepts();
		
		vm.getItems();
		
		vm.getTotalIteNum();
		
		vm.getInvoices();
		
		vm.getCanTrans();
		
		getSystemInfo();
		
		// 定时器触发更新服务器状态
		setInterval(getSystemInfo, 1000 * 60 * 10);
	</script>
</html>
